<template>
	<view class="content">
		<!-- 头部视频 -->
		<!-- #ifndef MP-TOUTIAO -->
		<view class="topVideo" @click="pageScroll">
			<video class="video" id="myVideo" :src="videoUrl" autoplay loop object-fit="cover" :controls="false" :muted="muted" @play="isShowCover=false"></video>
			<cover-image v-if="isShowCover" class="videoCover" src="https://dm.static.elab-plus.com/csc20201001/20201019172839.jpg" mode="aspectFit"></cover-image>
			<cover-image class="controls-muted img" @click.stop="muted=!muted" :src="!muted?'../../static/index/icon_muted.png':'../../static/index/icon_mute.png'" ></cover-image>
			<cover-view class="downBg">
				<cover-image src="https://dm.static.elab-plus.com/csc20201001/down-arrow-icon.gif"  mode=""></cover-image>
			</cover-view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-TOUTIAO -->
		<view class="topVideo" @click="pageScroll">
			<video class="video" id="myVideo" :src="videoUrl" autoplay loop object-fit="cover" :controls="false" :muted="muted" @play="isShowCover=false"></video>
			<image v-if="isShowCover" class="videoCover" src="https://dm.static.elab-plus.com/csc20201001/20201019172839.jpg" mode="aspectFit"></image>
			<image class="controls-muted img" @click.stop="muted=!muted" :src="!muted?'../../static/index/icon_muted.png':'../../static/index/icon_mute.png'" ></image>
			<view class="downBg">
				<image src="https://dm.static.elab-plus.com/csc20201001/down-arrow-icon.gif"  mode=""></image>
			</view>
		</view>
		<!-- #endif -->
		<!-- 列表 -->
		<view class="items">
			<view class="item" v-for="(obj,index) in items" :key="index">
				<image :src="obj.imageUrl" mode="widthFix" @click="goToVideoAction(obj.type)"></image>
			</view>
		</view>
		<!-- 商务联系 -->
		<contact currTab="elab"></contact>
	</view>
</template>

<script>
	import Contact from "../../components/contact/contact.vue"
	export default {
		data() {
			return {
				title: 'Hello',
				muted: true,
				isShowCover: true,
				videoUrl:"https://dm.static.elab-plus.com/csc20201001/index-video-new.mp4",
				items:[
					{type:'rxkf',imageUrl:'https://dm.static.elab-plus.com/csc20201001/%E6%9F%94%E6%80%A7%E5%BC%80%E5%8F%91%E8%A7%86%E9%A2%91%402x.png',},
					{type:'szky',imageUrl:'https://dm.static.elab-plus.com/csc20201001/%E6%95%B0%E5%AD%97%E5%8C%96%E5%AE%A2%E7%A0%94%E8%A7%86%E9%A2%91%402x.png'},
					{type:'ydkf',imageUrl:'https://dm.static.elab-plus.com/csc20201001/%E9%A2%84%E5%AE%9A%E5%88%B6%E5%BC%80%E5%8F%91%402x.png'},
					{type:'cgal',imageUrl:'https://dm.static.elab-plus.com/csc20201001/%E6%88%90%E5%8A%9F%E6%A1%88%E4%BE%8B%402x.png'},
					{type:'ceojy',imageUrl:'https://dm.static.elab-plus.com/csc20201001/CEO%E5%AF%84%E8%AF%AD%402x.png'}
				],
				members:[
					{imageUrl:'../../static/index/lk_icon.png'},
					{imageUrl:'../../static/index/cyz_icon.png'}
				],
				topVideoH: 0,
				current: {
					poster: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.jpg',
					name: '致爱丽丝',
					author: '暂无',
					src: 'https://cos.ap-shanghai.myqcloud.com/79ad-shanghai-090-shared-01-1256635546/b04d-1400107457/9bd0-418_10572/60acfe44cff5d752a9091bd4ad1473d5.mp3',
				},
				audioAction: {
					method: 'pause'
				}
			}
		},
		onLoad() {
		},
		onReady() {
		        // 计算屏幕剩余高度  填补剩余高度
		        let _this = this;
		        let view = uni.createSelectorQuery().select('.topVideo');
		        view.boundingClientRect(data => {
		        	_this.topVideoH = data.height;
		        }).exec();
		    },
		methods: {
			pageScroll(){
				uni.pageScrollTo({
				    scrollTop: this.topVideoH,
				    duration: 300
				});
			},
			goToVideoAction(type){
				// console.log("XXXXX", type);
				if(type=='ceojy'){
					return  uni.showToast({
								title: '敬请期待',
								icon: 'none'
							});
				}
				uni.navigateTo({
					url:"../../pages/video/video?type=" + type
				})
			},
		},
		components:{"contact" : Contact},
		onShareTimeline(){
			 return {
			   title: 'ELAB柔性开发以需定产',
			   path: ''
			 }
		}
	}
</script>

<style lang="scss">
	// 上下箭头
	@-webkit-keyframes updown {
	  25% {
	    transform: translateY(-8rpx);
	  }
	  50%,
	  100% {
	    transform: translateY(0);
	  }
	  75% {
	    transform: translateY(8rpx);
	  }
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.topVideo {
		width: 100vw;
		height: 100vh;
		background: #007AFF;
		position: relative;
		.video {
			width: 100%;
			height: 100%;
		}
		.videoCover {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		.controls-muted {
			width: 40rpx;
			height: 40rpx;
			// background-color: #007AFF;
			position: absolute;
			top: 200rpx;
			right: 60rpx;
		}
		.downBg {
			width: 100%;
			height: 52rpx;
			background: rgba(255,255,255,0.95);
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			cover-image {
				width: 44rpx;
				height: 44rpx;
			}
			image {
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
	.items {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.item {
			width: 690rpx;
			// background: #18B566;
			margin-bottom: 20rpx;
			image{
				width: 100%;
			}
		}
	}
</style>
